<script setup>
// 在 3.2.34 或以上的版本中，使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，无需再手动声明。
import { shallowRef } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
//这里用ref的话，vue给出警告Vue接收到一个组件，该组件被制成反应对象。这可能会导致不必要的性能开销，应该通过将组件标记为“markRaw”或使用“shallowRef”而不是“ref”来避免。
// 如果使用 markRaw 那么activeComponent将不永远不会再成为响应式对象。 所以得使用 shallowRef
const activeComponent = shallowRef(ComponentA)

</script>

<template>
  <input type="radio" name="com" :value="ComponentA" v-model="activeComponent">A
  <input type="radio" name="com" :value="ComponentB" v-model="activeComponent">B
  <!-- 1.不使用setup语法糖，这种方式和vue2差不多，is可以是个字符串 -->
  <!-- 2.使用setup语法糖，这时候的is如果使用字符串会加载不出来，得使用组件实例 -->
  <KeepAlive include="ComponentA">
    <component :is="activeComponent" />
  </KeepAlive>
</template>

<style>
</style>